<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</head>
<style type="text/css">
    .tab .nav-tabs {
    border-bottom: 0 none;
    background: #eaeaea;
    }
    .tab .nav-tabs li a {
    background: transparent;
    border-radius: 0;
    font-size: 16px;
    border: none;
    color: #333;
    padding: 12px 22px;
    }
    .tab .nav-tabs li.active a, .tab .nav-tabs li.active a i {
    border: 0 none;
    background:#e67e22;
    color: #fff;
    }
    .tab .nav-tabs li.active a:after {
    content: "";
    position: absolute;
    left: 45%;
    bottom: -14px;
    border: 7px solid transparent;
    border-top: 7px solid #e67e22;
    }
    .tab .tab-content {
    padding: 5px;
    color: #5a5c5d;
    font-size: 14px;
    line-height: 20px;
    margin-top: 5px;
    border-bottom: 1px solid #e67e22;
    }
    @media only screen and (max-width: 480px) {
    .tab .nav-tabs, .tab .nav-tabs li {
    width: 100%;
    background: transparent;
    }
    .tab .nav-tabs li.active a {
    border-radius: 10px 10px 0 0;
    }
    .tab .nav-tabs li:first-child a {
    border-bottom-left-radius: 0;
    }
    .tab .nav-tabs li a {
    margin-bottom: 10px;
    border: 1px solid lightgray;
    }
    .tab .nav-tabs li.active a:after {
    border: none;
    }
    }
    </style>
<body>
        
        <div class="panel panel-info">
              <div class="panel-heading">
                    <h3 class="panel-title">收入明细</h3>
              </div>
              <div class="panel-body tab">
                    
        
        <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">
                        月度账单
                    </a>
                </li>
                <li><a href="#ios" data-toggle="tab">季度账单</a></li>
                <li><a href="#dada" data-toggle="tab">自定义查看</a></li>

            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="home">
                        <div class="panel panel-default">
                                <div class="panel-heading">
                                      <h1 class="panel-title">月度账单</h1>
                                </div>
                                <div class="panel-body">
                                     <div class="text-right">
                                          <form action="" method="POST" class="form-inline" role="form">
                       
                                                  <div class="form-group">
                                                          <label class="" for="">月份:</label>
                                                          <input type="date" name="" id="">
                                                      </div>
                                                      
                                                  
                                              
                                                  <button type="submit" class="btn btn-info btn-sm">查询</button>    <button type="button" class="btn btn-info btn-sm">全部数据</button>
                                                  <button type="button" class="btn btn-success btn-sm">导出</button>
                                                  <button type="button" class="btn btn-success btn-sm">打印</button>
                                                 
                                              </form>
                                          </div>
                                        
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>月份</th>
                                                    <th>护理费</th>
                                                    <th>餐饮费</th>
                                                    <th>管理费</th>
                                                    <th>床位费</th>
                                                    <th>其他</th>
                                                    <th>合计</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>2019-4</td>
                                                    <td>1000.00</td>
                                                    <td>800.00</td>
                                                    <td>200.00</td>
                                                    <td>900.00</td>
                                                    <td>300.00</td>
                                                    <td>3200.00</td>
                                                </tr>
                                                <tr>
                                                      <td>2019-3</td>
                                                      <td>4000.00</td>
                                                      <td>3800.00</td>
                                                      <td>2300.00</td>
                                                      <td>4900.00</td>
                                                      <td>3300.00</td>
                                                      <td>22200.00</td>
                                                  </tr>
                                                  <tr>
                                                          <td>2019-2</td>
                                                          <td>1000.00</td>
                                                          <td>800.00</td>
                                                          <td>200.00</td>
                                                          <td>900.00</td>
                                                          <td>300.00</td>
                                                          <td>3200.00</td>
                                                      </tr>
                                                      <tr>
                                                              <td>合计</td>
                                                              <td>33300.00</td>
                                                              <td>11800.00</td>
                                                              <td>32200.00</td>
                                                              <td>20200.00</td>
                                                              <td>3030.00</td>
                                                              <td>32030.00</td>
                                                          </tr>
                                            </tbody>
                                        </table>
                                        
                                     
                                </div>
                          </div>
                      
                </div>
                <div class="tab-pane fade" id="ios">
                        <div class="panel panel-default">
                                <div class="panel-heading">
                                      <h1 class="panel-title">季度账单</h1>
                                </div>
                                <div class="panel-body">
                                        
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>季度</th>
                                                    <th>护理费</th>
                                                    <th>餐饮费</th>
                                                    <th>管理费</th>
                                                    <th>床位费</th>
                                                    <th>其他</th>
                                                    <th>合计</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>2019年第一季度</td>
                                                    <td>1000.00</td>
                                                    <td>800.00</td>
                                                    <td>200.00</td>
                                                    <td>900.00</td>
                                                    <td>300.00</td>
                                                    <td>3200.00</td>
                                                </tr>
                                                <tr>
                                                      <td>2018年第四季度</td>
                                                      <td>4000.00</td>
                                                      <td>3800.00</td>
                                                      <td>2300.00</td>
                                                      <td>4900.00</td>
                                                      <td>3300.00</td>
                                                      <td>22200.00</td>
                                                  </tr>
                                                  <tr>
                                                          <td>2018年第三季度</td>
                                                          <td>1000.00</td>
                                                          <td>800.00</td>
                                                          <td>200.00</td>
                                                          <td>900.00</td>
                                                          <td>300.00</td>
                                                          <td>3200.00</td>
                                                      </tr>
                                                      <tr>
                                                              <td>合计</td>
                                                              <td>33300.00</td>
                                                              <td>11800.00</td>
                                                              <td>32200.00</td>
                                                              <td>20200.00</td>
                                                              <td>3030.00</td>
                                                              <td>32030.00</td>
                                                          </tr>
                                            </tbody>
                                        </table>
                                        
                                     
                                </div>
                          </div>
                      
                </div>
                <div class="tab-pane fade" id="dada">
                        <div class="text-center">
                                <form action="#" method="POST" class="form-inline" role="form">
             
                                        <div class="form-group">
                                                <label class="" for="">月份:</label>
                                                <input type="date" name="" id="">
                                                <label class="" for="">月份:</label>
                                                <input type="date" name="" id="">
                                            </div>
                                            
                                        
                                    

                </div>
                <button type="button" class="btn btn-info btn-sm">查询</button> 
            </div>
            
            </div>
  </div>

    
</body>
</html>